<template>
  <!-- 训练营简介 -->
  <section class="section_box1 container scroll" data-index="1" id="1">
    <span class="big_title flexcc">训练营简介</span>
    <div class="content_box flexccc">
      <div class="infor-case flexjs">
        <div class="left_box flexccc">
          <p>
            工程师训练营是技成十五年线上教学经验沉淀，采集数百万学员高效学习需求，并结合智能制造行业发展趋势，以“智能制造”、“人工智能”两大实训进行课程研发。为培养行业高素质技术技能人才量身定制的一系列线下实训精品课。
          </p>
          <p>
            训练营“以岗定课”，依据对岗位所需能力调研解构，开发基于西门子、ABB工业机器人、机器视觉、数字化等多项专业课程及产品，帮助学员提升“编程思维、项目开发、解决问题”三大综合能力。
          </p>
        </div>
        <div class="right_box">
          <!-- Swiper -->
          <swiper
            v-bind:options="swiperOne"
            ref="mySwiper"
            class="swiperInfo"
            v-if="dispimage.length"
          >
            <swiper-slide
              class="swiper-slide"
              v-for="(item, index) in dispimage"
              :key="index"
            >
              <img :src="item" class="swiper-lazy" v-if="index == index" />
            </swiper-slide>

            <!-- Add Pagination -->
            <div class="swiper-pagination" slot="pagination"></div>
            <!-- Navigation -->
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
          </swiper>
        </div>
      </div>
    </div>
  </section>
</template>
<script>

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";
export default {
  name: 'section-box1',
  data() {
    return {
      swiperOne: {
        loop: true,//在loop 模式下使用 slidesPerview:'auto' ，还需使用该参数设置所要用到的loop 个数(一般设置大于可视slide个数2个即可)。
        // loopedSlides: 5,//可视slide有3个，loopedSlides可设为5个或以上
        initialSlide: '0',//默认显示第一个slide
        effect: "coverflow", //默认就是slide位移,fade淡入淡出,cube3d方块,coverflow 3d流
        slidesPerView: 'auto', //可视化展示图片
        centeredSlides: true,
        spaceBetween: '-50%',
        autoplay: {
          delay: 3000, //自动播放速度
          disableOnInteraction: false //鼠标移上去时是否还继续播放
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        coverflowEffect: {
          rotate: 0,
          stretch: 3,
          depth: 120,
          modifier: 5,
          slideShadows: false
        },
      },
    }
  },
  components: {
    swiper,
    swiperSlide,
  },
  // 接受父组件的值
  props: ["dispimage"],
  mounted() {

  },
  methods: {
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  updated() {
    if (this.dispimage.length > 1) {
      this.swiper.init();
    }
  },
}
</script>

<style lang="scss">
@import "./../assets/scss/base.scss";
@import "./../assets/scss/mixin.scss";
.section_box1 {
  padding-bottom: 56px;
  .content_box {
    margin-top: 48px;

    .infor-case {
      margin-top: 48px;
      height: 401px;

      .left_box {
        justify-content: space-between;
        width: 511px;
        height: 324px;
        margin-right: 49px;

        p {
          text-align: left;
          font-size: 18px;
          line-height: 200%;
          color: #1c1c28;
        }
      }

      .right_box {
        overflow: hidden;
        width: 640px;
        height: 100%;

        .swiperInfo {
          left: -111px;
          width: 763px;
          height: 100%;

          .swiper-slide {
            width: 540px !important;
            img {
              width: 100%;
              height: 367px;
              border-radius: 20px;
            }
          }

          .swiper-button-next::after {
            content: "";
          }

          .swiper-button-next {
            top: 53px;
            right: 0;
            width: 66px;
            height: 310px;
          }
        }
      }
    }
  }
  .swiper-pagination-bullets {
    bottom: 0;
  }

  .swiper-pagination-bullet-active {
    width: 30px;
    height: 10px;
    background: linear-gradient(90deg, #3860d9 0%, #1c3cc7 100%);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.04),
      0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
  }
}
</style>